<template>
  <div class="Echarts">
    <div id="rflyPublic" style="width: 1280px;height: 500px;padding-bottom: 10px;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      yearOrder : [],
      paperData : [],
      papers : [],
    }
  },
  methods:{
    myEcharts(paperData,yearOrder){
      var myChart = this.$echarts.init(document.getElementById('rflyPublic'));
      var option = {
        backgroundColor: '#fff',
        title: {
          left: 'center',
          top: 5,
          text: 'Paper Static'
        },
        tooltip: {},
        xAxis: {
            data: yearOrder
        },
        yAxis: {},
        series: [{
            name: 'Papers',
            type: 'bar',
            data: paperData
        }]
      };

      myChart.setOption(option);
    }
  },
  mounted() {
    this.$http.get('/json/Publications.json').then((response) => {
      // console.log(response);
      // console.log(response.data.before.length);
      this.yearOrder = response.data.yearOrder;
      this.papers = response.data.papers;
      for(let val in this.yearOrder) {  
        // console.log(this.yearOrder[val],this.papers[this.yearOrder[val]].length);
        this.paperData.push(this.papers[this.yearOrder[val]].length);
      }  
      this.myEcharts(this.paperData,this.yearOrder);

    });
    
  }

}
</script>

<style>

</style>
